<template>
    <div class="navigationmiddle">
        <Breadcrumb></Breadcrumb>
        <div class="info">
            <template v-if="navigationType == 'time'">
                <div class="title">
                    <div class="label">本周值班表</div>
                </div>
                <div class="content" v-for="dutyInfo, index in dutyInfoList" :key="index"
                    v-show="dutyInfo.driver || dutyInfo.leader || dutyInfo.officer">
                    <div class="operator center">
                        <span>{{ dutyInfo.dutyDate }}</span>
                    </div>
                    <div class="dutyInfo">
                        <div class="tr" v-show="dutyInfo.leader">
                            <div class="th">{{ endData.dutyOne || '值班领导' }}</div>
                            <div class="tb">{{ dutyInfo.leader }}</div>
                        </div>
                        <div class="tr" v-show="dutyInfo.officer">
                            <div class="th">{{ endData.dutyTwo || '值班人员' }}</div>
                            <div class="tb">{{ dutyInfo.officer }}</div>
                        </div>
                        <div class="tr" v-show="dutyInfo.driver">
                            <div class="th">{{ endData.dutyThree || '值班驾驶员' }}</div>
                            <div class="tb">{{ dutyInfo.driver }}</div>
                        </div>
                    </div>
                </div>
            </template>

            <template v-else>
                <div class="redHead" v-show="article.whetherRedHead">
                    <div class="redHeadContent">{{ article.redHeadContent || '关于做好春节前后低温雨雪冰冻灾害 防范应对工作的通知 ' }}</div>
                    <div class="redHeadNumber">{{ article.redHeadNumber || '舟公普通字〔2024)41号' }}</div>
                    <div class="redHeadTitle">{{ article.title }}</div>
                </div>
                <div class="notRedHead" v-show="!article.whetherRedHead">
                    <div class="title">
                        <div class="label" :style="{ 'fontSize': article.titleSize || '30px' }">{{ article.title }}
                        </div>
                        <div class="operator centeroperator">
                            <span>文章来源：{{ article.operator }}</span>
                            <span>{{ article.publishTime }}</span>
                            <span class="viewVolume" :class="article.viewVolume > 100 ? 'hotView' : ''">浏览量：{{
                                article.viewVolume }}次</span>
                        </div>
                    </div>
                </div>
                <div class="content" v-html="article.content"></div>
            </template>
        </div>
    </div>
</template>

<script>
import homepageApi from '@/api/homepage';
import article from "@/api/article" //头部
import Breadcrumb from "@/components-website/breadcrumb.vue" //头部
import Hander from "@/components-website/hander.vue" //头部
export default {
    name: 'navigation',
    components: { Hander, Breadcrumb },
    data() {
        return {
            article: {},
            dutyInfoList: [],
            navigationType: '',
            endData: {}
        }
    },
    mounted() {
        this.getquery();
        this.queryEndPage();
    },
    methods: {
        async queryEndPage() {
            let { data } = await homepageApi.queryEndPage();
            this.endData = data || {}
        },
        getquery() {
            let articleId = this.$route.query?.articleId;
            let type = this.$route.query?.type;
            if (type == 'time') {
                this.navigationType = type;
                this.queryWeek();
            } else {
                this.queryContent(articleId)
            }
        },
        async queryWeek() {
            let { data } = await homepageApi.queryWeek()
            this.dutyInfoList = data || [];
            console.log(this.dutyInfoList, "/*/*/*/*/*/*")
        },
        async queryContent(articleId) {
            if (articleId) {
                let { data } = await article.queryContent(articleId);
                this.article = data;
            } else {
                this.article = {}
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.navigationmiddle {
    margin-bottom: 50px;

    .info {
        padding: 20px;
        padding-bottom: 50px;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0px 0px 30px 10px rgba(102, 102, 102, 0.116);

        .title {
            line-height: 30px;
            padding-bottom: 20px;
        }

        .label {
            font-size: 20px;
            text-align: center;
            color: #0651c2;
        }

        .operator {
            font-size: 21px;
            text-align: left;
            line-height: 40px;
            font-weight: 200;

            span {
                padding: 0 20px;
            }
        }

        .centeroperator {
            text-align: center;
        }

        .content {
            width: 100%;
            padding: 0 10px;

            .dutyInfo {
                width: auto;
                width: 800px;
                margin: 0 auto;
                border: 1px solid #cecece;
                font-size: 24px;
                line-height: 60px;

                .tr {
                    border-bottom: 1px solid #cecece;
                    display: flex;
                    justify-content: flex-start;
                }

                .th {
                    width: 200px;
                    padding: 0 30px;
                    border-right: 1px solid #cecece;
                }

                .tb {
                    width: calc(100% - 205px);
                    padding-left: 15px;
                }
            }
        }
    }
}

.center {
    text-align: center !important;
}

.viewVolume {
    font-size: 14px;
    color: #1895cf;
}

.hotView {
    color: red;
}

.redHead {
    padding-top: 40px;
}

.redHeadContent {
    color: rgb(194, 27, 27);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 50px;
}

.redHeadNumber {
    border-bottom: 5px solid rgb(194, 27, 27);
    padding-bottom: 20px;
    margin-bottom: 60px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;

}

.redHeadTitle {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 80px;
}

.notRedHead {
    padding-top: 40px;
    border-bottom: 1px solid #faf0f0;
    margin-bottom: 30px;
}
</style>